<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script>
        const oBox = document.getElementById('box')

        // 1基础节流
        // let lastTime = 0
        // oBox.onmousemove = function () {
        //     // 获取现在时间
        //     const nowTime = Date.now()
        //     // 约束每次触发的时间
        //     if (nowTime - lastTime < 100) {
        //         return
        //     }
        //     // 每次移动后将上次时间重新赋值
        //     lastTime = nowTime
        //     // 如果间隔时间大于100则会执行代码
        //     console.log("核心代码");
        // }

        // let lastTime = 0
        // oBox.onmousemove = function () {
        //     const nowTime = Date.now()
        //     if (nowTime - lastTime < 100) {
        //         return
        //     }
        //     lastTime = nowTime
        //     console.log("我是daima");
        // }

        // let lastTime = 0
        // oBox.onmousemove = function () {
        //     const nowTime = Date.now()
        //     if (nowTime-lastTime<100) {
        //         return
        //     }
        //     lastTime=nowTime
        //     console.log("我是代码");
        // }

        // 封装函数节流

        // function throttle(fn,time){
        // let lastTime=0
        // return function(e){
        //     const nowTime=Date.now()
        //     if (nowTime-lastTime<time) {
        //         return
        //     }
        //     lastTime=nowTime
        //     fn.call(this,e)
        // }

        // }

        // function content(e){
        // console.log("核心代码");
        // console.log(e);
        // console.log(this);
        // }

        // oBox.onmousemove=throttle(content,100)

        // 节流函数
        // function throttle(fn, time) {
        // 上一次的时间
        //         let lastTime = 0
        //     // 因为事件函数要传参会直接调用所以return的函数才是真正的节流函数
        //     return function (e) {
        //         
        //         // 每次触发时间的时间
        //         let nowTime=Date.now()
        //         if (nowTime-lastTime<time) {
        //             return
        //         }
        // lastTime = nowTime
        //         // 核心函数的this和e指向不对需要修改
        //         fn.call(this,e)
        //     }
        // }
        // // 核心代码
        // function content(e) {
        //     console.log("核心代码");
        //     console.log(e);
        //     console.log(this);
        // }
        // // 事件函数
        // oBox.onmousemove = throttle(content, 100)



        // function throttle(fn, time) {
        //     let lastTime = 0
        //     return function (e) {

        //         let nowTime = Date.now()
        //         if (nowTime - lastTime < time) {
        //             return
        //         }
        //         lastTime = nowTime
        //         fn.call(this, e)
        //     }
        // }

        // function content(e) {
        //     console.log("核心代码");
        //     // console.log(e);
        //     // console.log(this);

        // }

        // oBox.onmousemove = throttle(content, 100)


function throttle(fn,time){
let lastTime=0
return function(e){
    let nowTime=Date.now()
    if (nowTime-lastTime<time) {
        return
    }
    lastTime=nowTime
    fn.call(this,e)
}

}

function content(e){
console.log("核心代码");
console.log(this);
console.log(e);
}



oBox.onmousemove=throttle(content,100)


    </script>
</body>

</html>